<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
  
    detectBrowser();
    var myLatlng = new google.maps.LatLng(-33.890542, 151.274856);
    var myOptions = {
      zoom: 9,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  setMarkers(map, beaches);
}



function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
    
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}


/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];
	
	function setMarkers(map, locations) {
  	for (var i = 0; i < locations.length; i++) {
    	var beach = locations[i];
    	var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
   	 var marker = new google.maps.Marker({
      	  position: myLatLng,
      	  map: map,
      	  //shadow: shadow,
      	  //icon: image,
    	    //shape: shape,
      	  title: beach[0],
    	    zIndex: beach[3]
    	});


    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+beach[0]+
        '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large </p>'+
        '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
/*    
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
    */
    
		google.maps.event.addListener(marker, 'click', infoCallback(infowindow, marker));
    
  	}
  	
  	function infoCallback(infowindow, marker) {
return function() {
infowindow.open(map, marker);
};
}
	}


</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>
